<template>
	<div class="survy-main">
		<div class="c-title" style="">
			<!-- <div class="logo">
				<img  width="42" height="32" alt="">
			</div> -->
			<!-- <p class="name">{{form.name}}</p> -->
		</div>
		
		<div class="c-login">
			<h1>{{form.name}}</h1>
			<div id="contre">
			 <component v-for="(item, index) in ary" ref="headerChild" style="width: 100%;height: 100%;" :is="item.app" :key="index" :msgJsonApp="item.msgJson"></component>
			</div>
			<input type="button" @click="save()" value="提交" id="regBtn" />
		</div>
	</div>
</template>

<script>
	import pageApi from '@/api/system/page.js'
	import api from "@/api/web/index.js"
	export default {
		data() {
			return{
				ary:[],
				form:{},
			}
		},
		mounted() {
			this.show()
			this.begin()
		},
		methods:{
			save(){
				var list = {}
				this.$refs.headerChild.forEach(res=>{
					list[Object.keys(res.showData())[0]] = Object.values(res.showData())[0]
				})
				var data = {
					pageId : this.$route.params.pageId,
					json : JSON.stringify(list)
				}
				pageApi.addData(data).then(res=>{
					if(res.code==200){
						this.$message({type: 'success',message: '提交成功'});          
						this.$router.push('/finish/'+this.$route.params.pageId)
					}
				})  
			},
			show(){
				var data = {
				  id:this.$route.params.pageId
				}
				pageApi.getById(data).then(res=>{
					this.form=res.data
					if(res.data.img){
						$(".c-title").attr('background-image',res.data.img);
					}
				})  
			},
			begin(){
				api.Modulelist(this.$route.params.projectId,this.$route.params.pageId).then(res=>{
					let arr=[]
					res.list.forEach(data=>{
						let list={}
						list.app= require(`../../components/${data.name}.vue`).default,
						list.title=data.title,
						list.msgJson=data.webComposing.msgJson
						arr.push(list)
					})
					this.ary=arr
				})
			}
		}
	}
</script>

<style>
	
	.survy-main{
		width: 100%;
		height: 100%;
		background-image: url('http://120.78.73.142:9092/hbai.png');
		background-size:100% 100%;
	}
	.c-head {
		padding: 12px 0px;
		position: absolute;
		top: 0px;
		left: 15px;
		font-size: 15px;
		font-weight: bold;
		color: white;
	}
	.c-head img {
		width: 12px;
	}
	.c-title{
		position: relative;
		width: 100%;
		/* background-image: linear-gradient(to left,#ff8736,#ffa83e); */
		text-align: center;
		box-sizing: border-box;
		padding: 70px;
		overflow: hidden;
	}
	.c-title .logo{
		width: 100px;
		height: 40px;
		background-color: white;
		margin: auto;
		border-radius: 20px;
	}
	.c-title .logo img{margin:5px 0 0 0;}
	.c-title .name{
		font-size: 36px;
		color: white;
	}
	.c-title .name:before{
		content: '';
		display: block;
		width: 260px;
		height: 260px;
		border-radius: 100%;
		position: absolute;
		background-color: rgba(255,255,255,0.2);
		top:-85px;
		right: -85px;
	}
	.c-title .name:after{
		content: '';
		display: block;
		width: 180px;
		height: 180px;
		border-radius: 100%;
		position: absolute;
		background-color: rgba(255,255,255,0.2);
		top: -100px;
	    right: -70px;
	}
	.c-title:before{
		content: '';
		display: block;
		width: 150px;
		height: 150px;
		border-radius: 100%;
		position: absolute;
		background-color: rgba(255,255,255,0.2);
		bottom: -55px;
	    left: -70px;
	}
	/* 登录 */
	.c-login{
		padding: 15px 0px;
		position: relative;
		margin: 10px;
		box-shadow: 0 0 7px #fdd8ac;
		border-radius: 12px;
		background: white;
		margin-top: 40px;
	}
	.c-login h1{
		font-size: 22px;
		color: rgb(255,168,62);
		margin: 0px 0px 15px 40px;
		font-weight: bold;
	}
	.c-login .loginForm{
		text-align: center;
	}
	.c-login .loginForm input[type="text"],
	.c-login .loginForm input[type="password"],
	.c-login  input[type="button"]{
		display: block;
		border: none;
		border-bottom: 1px solid rgb(215,215,215);
		width: 300px;
		margin: 0px auto 20px auto;
		font-size: 14px;
		-webkit-appearance:none;
		border-radius:0;
	}
	/* .c-login .loginForm input[type="text"]{
		padding: 8px 0px 8px 30px;
		background-image:url(../img/login-phone.png);
		background-repeat: no-repeat;
		background-size: 15px;
		background-position: 5px 3px;
	}
	.c-login .loginForm .userLogo{
		background-image:url(../img/login-user.png)!important;
		background-size: 18px!important;
	}
	.c-login .loginForm input[type="password"]{
		padding: 8px 0px 8px 30px;
		background-image:url(../img/login-password.png);
		background-repeat: no-repeat;
		background-size: 18px;
		background-position: 5px 3px;
	} */
	.c-login .loginForm .codeDiv{
		width: 230px;
		margin: 0px auto 20px auto;
		border-bottom: 1px solid rgb(215,215,215);
	}
	.c-login .loginForm .codeDiv input[type="text"]{
		margin: 0px;
		border: none;
	}
	.c-login  input[type="button"]{
		padding: 8px 0px 8px 0px;
		margin-bottom: 10px;
		border-radius: 20px;
		width: 230px;
		color: white;
		background-color: #55aaff;
		font-size: 14px;
	}
	.c-login .otherBtn{
		font-size: 12px;
		text-align: center;
	}
	.c-login .otherBtn em{
		margin-left: 80px;
	}
	.c-login .otherBtn .findPwd{
		color: rgb(153,153,153);
	}
	.c-otherLogin{
		width: 100%;
		margin-top: 100px;
		margin: 100px 0px 40px 0px;
		text-align: center;
	}
	.c-otherLogin h1{
		color: rgb(153,153,153);
		font-size: 15px;
		margin-bottom: 20px;
	}
	.c-otherLogin .otherLogin {
		width: 35px;
		height: 35px;
		border: 1px solid rgb(215,215,215);
		display: inline-block;
		margin-right: 40px;
		border-radius: 50%;
		position: relative;
	}
	.c-otherLogin .otherLogin:last-child{
		margin-right: 0px;
	}
	.c-otherLogin .otherLogin img{
		width: 26px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -10px;
		margin-left: -13px;
	}
	.c-login .loginForm .codeImg{
		width: 75px;
		height: 25x;
		vertical-align: middle;
	}
	
/* 	以下是注册页面
	.c-login .loginForm .codeText{
		display: inline!important;
		background-image:url(../img/login-code.png)!important;
		width: 120px !important;
	} */
	.c-login .loginForm .codeBtn{
		padding: 4px 0px 4px 0px!important;
		width: 75px!important;
		display: inline!important;
		border-radius: 5px!important;
		font-size: 12px!important;
	}
</style>
